import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Search extends StatefulWidget {
  const Search({Key? key}) : super(key: key);
  @override
  _SearchState createState() => _SearchState();
}

FocusNode _focusNode = FocusNode();
class _SearchState extends State<Search> {
  final FocusNode _commentFocus = FocusNode();
  double num=0;
  late bool numlenth =false; //账号得判断
  void initState(){
    _commentFocus.addListener(() {
      if(!_commentFocus.hasFocus){
        increaseWidth();
      }else{
        narrowWidth();
      }

    });
  }
  void narrowWidth(){
    setState(() {
      num=20.0;
      numlenth= true;
    });
  }
  void increaseWidth(){
    setState(() {
      num=0.0;
      numlenth= false;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 55,
      padding: const EdgeInsets.only(left: 10.0, right: 10.0),
    child: Row(
      children: [
       Expanded(
         child: Container(
           height: 50,
           padding:  EdgeInsets.only(right: num),
           child: TextField(
             focusNode: _commentFocus,
                 style: const TextStyle(fontSize: 20.0),
                 cursorHeight: 30,
                 decoration: const InputDecoration(
                     fillColor: Color.fromRGBO(232, 240, 255, 1),
                     filled: true,
                     contentPadding: EdgeInsets.only(),
                     // border: OutlineInputBorder(
                     //   borderRadius: BorderRadius.all(Radius.circular(30),)
                     // ),
                     //   没有选择的时候
                     enabledBorder: OutlineInputBorder(
                       borderRadius: BorderRadius.all(Radius.circular(10)),
                       borderSide: BorderSide(color: Color.fromRGBO(232, 240, 255, 1)),
                     ),
                     // 选中的时候
                     focusedBorder: OutlineInputBorder(
                       borderRadius: BorderRadius.all(Radius.circular(10),),
                       borderSide: BorderSide(color: Colors.lightBlue),
                     ),
                     hintText: 'Search',
                     prefixIcon: Icon(Icons.search)
                 ),
           ),
         ),
       ),
        Visibility(
              child: Container(
                width: 80.0,
                height: 40.0,
                margin: const  EdgeInsets.only(right: 0.0),
                child:   TextButton(onPressed: (){
                  print('1111');
                }, child: const Text('搜索'),style: ButtonStyle(
                    textStyle: MaterialStateProperty.all(
                      const TextStyle(fontSize: 18, color: Colors.white),
                    ),
                    // 按钮字体
                    foregroundColor: MaterialStateProperty.all(
                        Colors.white),
                    // 按钮背景
                    backgroundColor: MaterialStateProperty.all(
                        Colors.lightBlueAccent),
                    // 按钮边框
                    shape: MaterialStateProperty.all(
                        RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(
                                30
                            )
                        )
                    )
                ),)
              ),
              visible: this.numlenth ),
      ],
    ),
    );

  }
}
